<template>
	<view class="container">
		<view class="tittel">
			<text class="tiittleL">{{classDetail.name}}</text>
			<text class="tiittleR">匿名评论
				<switch :checked="treatmentStatu.checked" color="#4DC897" @change="switchChange" /></text>
		</view>
		<view class="comment">
			<textarea placeholder="请输入评论内容" v-model="desc" maxlength="100" />
			<view class="font"> {{txtVal}}/100</view>
			<button type="primary" @click="addComment">发表评论</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				treatmentStatu: { checked: true },
				txtVal: 0,
				desc:"",
				details:{},
				classDetail:{},
				topic_id:'',
				class_id:'',
				user:{},
				pid:'',
				to_uid:'',
				to_nickname:''

			}
		},
		watch:{
			"desc":function(){
				this.txtVal = this.desc.length;
			}
		},
		async onLoad(options){
			this.loadData(options)
			this.topic_id = options.id
			this.class_id = options.class_id
			this.pid = options.pid||null
			this.to_uid = options.to_uid||null
			this.to_nickname = options.to_nickname||null
		},
		methods: {
			descInput(){
				console.log(this.desc)
			    // this.txtVal = this.desc.length;
			},
			    
			switchChange(e) {
				let value = e.target.value
				let that = this
				this.$set(this.treatmentStatu, 'checked', value) // 将点击改变的状态赋给treatmentStatu.checked
				if (value && !this.havePromise) {
					
				}
			},
			loadData(option){
				this.$Request.post4(
					this.$api.httpApi.special.detail, {
						topic_id: option.id
					}
				).then(res => {
					if (res.code == 1) {
						this.details = res.data
						
				
					}
				})
				this.$Request.post4(
					this.$api.httpApi.special.categoryDetail, {
						class_id: option.class_id
					}
				).then(res => {
					if (res.code == 1) {
						this.classDetail = res.data
						
				
					}
				})
				this.$Request.post(
					this.$api.httpApi.user.userinfo+'&token='+this.$SysCache.get('token'),
					).then(res=>{
						if(res.code == 200){
							this.user=res.data;
							
						}
					});	
			},
			addComment(){
				let that = this
				var privates = 0
				if(this.treatmentStatu.checked){
					privates = 1
				}else{
					privates = 0
				}
				if(this.$SysCache.get("token")){
					this.$Request.post4(
						this.$api.httpApi.special.addComment, {
							topic_id: this.topic_id,
							class_id: this.class_id,
							pid: this.pid,
							to_uid: this.to_uid,
							to_nickname: this.to_nickname,
							is_private:privates,
							content:this.desc,
							uid:this.user.id
						}
					).then(res => {
						if (res.code == 1) {
							uni.showModal({
								title:'提示',
								content:"评论成功！",
								success:function(resd){
									if(resd.confirm){
										that.$api.prePage().loadData(that.topic_id)
										uni.navigateBack({
										    delta:1
										});
									}
									else if (resd.cancel) {
												
									            uni.navigateBack({
									                delta:1
									            });
									        }
								}
							})
							
							
					
						}
					})
				}else{
					uni.showModal({
						title:'提示',
						content:"请登录！",
						
					})
				}
				
			}
		}		
	}	
</script>

<style  lang="scss">
	page{background: #E9E9E9;}
	.tittel{
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: 0upx auto;
		padding: 10upx 0;
		padding-top: 66upx;
		.tiittleL{
			font-size: 34upx;
		}
		.tiittleR{
			color: #666;
			font-size: 27upx;
			switch{
				margin-left:20upx;
			}
		}
		
	}
	.comment{
		 width: 90%;
		 margin: 0upx auto;
		margin-top: 20upx;
		textarea{
			padding: 20upx 25upx;
			background: #fff;
			width: 100%;
			padding-bottom: 60upx;
		}
		button{
			margin: 60upx auto;
			background: #F0406F;
			border-radius:35upx;
			font-size: 28upx;
		}
		.font{
			text-align: right;
			margin: -60upx 20upx 0 0;
			position: relative;
			z-index: 10;
			color: #999999;
			font-size: 27upx;
			}
	}
</style>
